<!--
 * @Description: 
 * @Date: 2024-05-16 10:26:27
 * @LastEditTime: 2024-08-26 09:19:53
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '记录查询详情',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>
<template>
  <view class="recordDetail w-screen h-screen bg-#F4F5F9">
    <view class="px-40rpx py30rpx bg-#fff">
      <wd-steps :active="active" align-center>
        <wd-step title="提交成功" />
        <wd-step title="审核中" />
        <wd-step title="审核结果" />
      </wd-steps>
    </view>
    <view class="px-30rpx py-20rpx" v-if="menuName != '羁押必要性审查'">
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">姓名:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.name }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">
              {{ menuName == '信访服务' ? '信访内容' : '线索内容' }}:
            </view>
            <view class="inline-block text-#5a5b5d">
              {{ caseData.content }}
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">上传相关资料:</view>
            <view class="text-#5a5b5d">
              <wd-img
                v-for="(item, index) in filesList"
                :width="100"
                :height="100"
                :src="baseUrl + item.url"
                :enable-preview="true"
              />
            </view>
          </view>
        </template>
      </wd-cell>
      <!-- <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">主体身份:</view>
            <view class="inline-block text-#5a5b5d">当事人</view>
          </view>
        </template>
      </wd-cell> -->
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">提交时间:</view>
            <view class="inline-block text-#5a5b5d">
              {{ formatTime(caseData.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">审核结果:</view>
            <view class="inline-block text-#5a5b5d">{{ getType(caseData.status) }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">审核说明:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.acceptContent }}</view>
          </view>
        </template>
      </wd-cell>
    </view>
    <view class="px-30rpx py-20rpx" v-else>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">姓名:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.applicant }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">主体身份:</view>
            <view class="inline-block text-#5a5b5d">
              {{ getApplicantType(caseData.applicantType) }}
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">姓名:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.applicant }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">被申请人姓名:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.applicant }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">上传相关附件:</view>
            <view class="text-#5a5b5d">
              <view v-for="(item, index) in filesList" class="flex">
                <view class="mr-20rpx max-w-[80%]">
                  {{ item.name }}
                </view>
                <wd-icon name="view" size="22px" @click="viewFileFn(item.url)"></wd-icon>
                <!-- <wd-icon name="download" size="22px" @click="downloadFun(item.url)"></wd-icon> -->
              </view>
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">提交时间:</view>
            <view class="inline-block text-#5a5b5d">
              {{ formatTime(caseData.createTime, 'yyyy-MM-dd HH:mm:ss') }}
            </view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">审核结果:</view>
            <view class="inline-block text-#5a5b5d">{{ getType(caseData.status) }}</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell>
        <template #title>
          <view>
            <view class="inline-block mr-10rpx">审核说明:</view>
            <view class="inline-block text-#5a5b5d">{{ caseData.acceptContent }}</view>
          </view>
        </template>
      </wd-cell>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getPublicAPI, getPetitionAPI, getDetentionAPI, getFileistAPI } from '@/service/index/foo'
import { formatTime } from '@/utils/index'

const active = ref<number>(0)
const menuName = ref()
const baseUrl = import.meta.env.VITE_SERVER_BASEURL
const typeList = [
  {
    value: 1,
    label: '审核中',
  },
  {
    value: 2,
    label: '审核通过',
  },
  {
    value: 3,
    label: '审核驳回',
  },
]
const promotionlist = ref<any[]>([
  {
    value: '1',
    label: '当事人',
  },
  {
    value: '2',
    label: '当事人法定代理人',
  },
  {
    value: '3',
    label: '当事人近亲属',
  },
  {
    value: '4',
    label: '辩护人',
  },
])
const getType = computed(() => {
  return function (index) {
    if (index != undefined) {
      return typeList.filter((item) => {
        return item.value == index
      })[0].label
    }
  }
})
const getApplicantType = computed(() => {
  return function (index) {
    if (index) {
      if (index != undefined) {
        return promotionlist.value.filter((item) => {
          return item.value == index
        })[0].label
      }
    }
  }
})
const caseData = ref({
  name: undefined,
  content: undefined,
  createTime: undefined,
  status: undefined,
  acceptContent: undefined,
  files: undefined,
  applicant: undefined,
  applicantPhone: undefined,
  partyCard: undefined,
  partyName: undefined,
  applicantType: undefined,
})
const businessList = {
  信访服务: 'xinFang',
  公益诉讼: 'gongYi',
  羁押必要性审查: 'jiYa',
}
const filesList = ref([])
const menuList = {
  信访服务: getXinFangPage,
  公益诉讼: getGongYiPage,
  羁押必要性审查: getJiYaPage,
}
onLoad((options) => {
  if (options.id) {
    menuName.value = options.menu
    menuList[options.menu](options.id)
    getFileistAPI({ businessId: options.id, businessType: businessList[options.menu] }).then(
      (res) => {
        filesList.value = res.data.list
      },
    )
  }
})
function getXinFangPage(id) {
  getPetitionAPI(id).then((res) => {
    caseData.value = Object.assign(unref(caseData), res.data)
    if (caseData.value.status == 3 || caseData.value.status == 2) {
      active.value = 2
    }
    if (caseData.value.status == 1) {
      active.value = 1
    }
  })
}
function getGongYiPage(id) {
  getPublicAPI(id).then((res) => {
    caseData.value = Object.assign(unref(caseData), res.data)
    if (caseData.value.status == 3 || caseData.value.status == 2) {
      active.value = 2
    }
    if (caseData.value.status == 1) {
      active.value = 1
    }
  })
}
function getJiYaPage(id) {
  getDetentionAPI(id).then((res) => {
    caseData.value = Object.assign(unref(caseData), res.data)
    if (caseData.value.status == 3 || caseData.value.status == 2) {
      active.value = 2
    }
    if (caseData.value.status == 1) {
      active.value = 1
    }
  })
}
function viewFileFn(fileUrl) {
  // 文件url 文件名 文件后缀
  uni.showLoading({ title: '加载中…', mask: true })
  const downloadTask = uni.downloadFile({
    url: baseUrl + fileUrl,
    success: function (res) {
      console.log('downloadFile 成功', res)
      const tempFilePath = res.tempFilePath // 下载成功后的临时文件路径
      uni.openDocument({
        filePath: tempFilePath, // 打开新的文件路径
        showMenu: false,
        success: function (res) {
          console.log('openDocument 成功', res)
          uni.hideLoading()
        },
        fail: function (err) {
          console.log('openDocument 失败', err)
          uni.hideLoading()
        },
      })
    },
    fail: function (res) {
      console.log('downloadFile 失败', res)
      uni.hideLoading()
    },
  })
}
function downloadFun(fileUrl) {
  uni.showLoading({ title: '正在下载……' })

  // console.log(that.hostUrl + '/uploads'+ enclosure)
  uni.downloadFile({
    url: baseUrl + fileUrl, // 下载地址接口返回
    success: (data) => {
      console.log('打印data', data)
      if (data.statusCode === 200) {
        // 隐藏加载框
        uni.hideLoading()
        // 文件保存到本地
        uni.saveFile({
          tempFilePath: data.tempFilePath, // 临时路径
          success: function (res) {
            // console.log('打印res',res)
            uni.showToast({
              icon: 'success',
              mask: true,
              // title: '文件已保存：' + res.savedFilePath, //保存路径
              title: '下载成功',
              duration: 2000,
            })

            // 自动打开文档查看
            setTimeout(() => {
              const filePath = res.savedFilePath
              uni.openDocument({
                // 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
                filePath,
                showMenu: true,
                success: function (res) {
                  console.log('打开文档成功')
                },
              })
            }, 2000)
          },
        })
      }
    },
    fail: (err) => {
      console.log(err)
      uni.showToast({
        icon: 'none',
        mask: true,
        title: '文件下载失败',
      })
    },
  })
}
function nextStep() {
  active.value = active.value + 1
}
</script>
<style lang="scss" scoped>
::v-deep .wd-cell__right {
  flex: none !important;
}
</style>
